<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 如何取消重复请求 </title>

    <script src="../javascripts/axios.js"></script>

</head>

<body>
    <!-- 

        官网 地址  
        https://github.com/axios/axios

        文档 
        http://www.axios-js.com/zh-cn/docs/


        同样的api , 

        使用 promise 管理异步 ， 告别传统 callback



        使用  axios    发送 post 请求

        axios 请求与响应配置参数  

        定制化 请求 


        get 有两个参数
        axios.get(url[, config])

        post  
        有三个参数  url, data, config 
        axios.post(url[, data[, config]])


        或者直接时候用  axios(config) , config={url:xxx,header:xxx,...}

      
    
        http://www.axios-js.com/zh-cn/docs/#axios-get-url-config


        响应参数 配置 



        



        https://segmentfault.com/a/1190000004322487



    -->
    <h1>axios 如何取消重复请求  </h1>
    <input id= "btn" type="button" value="点击">

    <!-- <button></button> -->
    <div></div>


    <script>
        // 请求配置参数 
        // 配置写法 
        // axios({
        //     url: '/list',
        //     method: 'GET',
        //     params: {
        //         ID: 12345,
        //         username: 'frank'

        //     },
        //     headers: {
        //         'Accept': 'application/json, text/plain, */*',
        //         'Cache-Control': 'no-cache'

        //     }

        // });

        // 发送post 数据,通过配置 
        // axios({
        //     url: '/register',
        //     method: 'POST',
        //     headers: {
        //         'Accept': 'application/json, text/plain, */*',
        //         'Content-Type': 'application/json',
        //         'Cache-Control': 'no-cache'

        //     },
        //     // 要发送的数据
        //     data: { id: 1, username: 'frank' }

        // }).then((response) => {
        //     console.log(response);
        // }).catch((err) => {
        //     console.log(err);

        // });



        // axios 全局配置 
        // 你可以指定将被用在各个请求的配置默认值
        // 每个请求都会携带 这个的配置
        // const AUTH_TOKEN = 'sdfx*#@xx00l;;./,jd]/s\]qa23642(&sosoajfoa';
        // axios.defaults.baseURL = 'https://api.example.com';
        // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        // 默认 每个请求都会有这个,如果请求中实际配置了这个参数 ，将会覆盖默认的配置， 使用自己的参数进行发送数据
        // axios.defaults.params = { age: 10 }


        /*
        
        http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8

        请求拦截器 

        响应拦截器 

        axios 拦截器， 可以在请求前或者响应前 做一些统计处理， 例如： 携带头信息， 添加一个全局的loading ,添加全局错误处理等等。 





        取消请求 方法   

        http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88

            使用 cancel token 取消请求

        // const cancelToken = axios.CancelToken;
        // const source = cancelToken.source();

        // config.cancelToken = source.token;
        // source.cancel('取消请求');

        axios 可以利用 cancel token 方式 在请求过程中 取消请求，利用这种方式 实现 取消重复的请求. 
        

        */
        
  





        var button = document.querySelector('#btn');
        var div = document.querySelector('div');


        button.onclick = function(){
            axios.get('/list').then((res) => {
                console.log(res);
            })

        }

        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            // console.log('before request begin');
            const cancelToken = axios.CancelToken;           
            const source = cancelToken.source();


            config.cancelToken = source.token;;
            
            // 每次请求判断是不是 loading 状态，如果是 就取消请求
            console.log('div.innerHtml:',div.innerHTML);
            if (div.innerHTML  === 'loading'){
                // source.canel('')
                source.cancel('Operation canceled by the user. 取消请求');
            }
            
            div.innerHTML = 'loading';


            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });



        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            console.log('before response begin');
            div.innerHTML = '';
            return response;
        }, function (error) {
            // 对响应错误做点什么
            // if (error.response.status === 404){
            //     div.innerHTML = 'Page Not Found';
            // }

            return Promise.reject(error);
        });




        // axios.get('/list',
        //     {
        //         method: 'GET',
        //         params: {
        //             ID: 12345,
        //             username: 'frank',


        //         }
        //     }).then((response) =>{
        //         console.log(response.data);
        //     }).catch((err) =>{
        //         console.log(err);
        //     });


        // axios.post('/register', {
        //     id: 1,
        //     username: 'frank'

        // }
        // ).then((res) => {
        //     console.log(res);

        //     /*
        //     {
        //         // `data` 由服务器提供的响应
        //         data: {},

        //         // `status` 来自服务器响应的 HTTP 状态码
        //         status: 200,

        //         // `statusText` 来自服务器响应的 HTTP 状态信息
        //         statusText: 'OK',

        //         // `headers` 服务器响应的头
        //         headers: {},

        //         // `config` 是为请求提供的配置信息
        //         config: {
        //             adapter:xxx,
        //             data:xxx,
        //             headers,
        //             method:xx,
        //             timeout:xxx,
        //             url:xxx
        //             ...
                    
        //         },
        //         // 'request'
        //         // `request` is the request that generated this response
        //         // It is the last ClientRequest instance in node.js (in redirects)
        //         // and an XMLHttpRequest instance the browser
        //         request: {}
        //     }
            
        //     */
        // }).catch((err) => {

        //     console.log(err);
        // });







        // 
        //   /list?ID=12345&username=frank

        // Every time we love, every time we give, it's Christmas.
        // 爱与分享，是圣诞的意义。

    </script>
</body>

</html>